<template>
	<view class="load-view">
		<!-- <block v-if="current == 0"> -->
		<view>
			<th-titlebar ref="titleBar" :commonTitle="false"></th-titlebar>
			<view class="content-view-box">
				<!-- banner 搜素区域 -->
				<!-- <view class="search-box" :style="{ top: titleBarHeight + 'px', background: rgba }">
					<th-search :disabled="false" @search="search"></th-search>
				</view> -->
				<view class="banner"><u-swiper :list="swiperList" mode="none" height="280" @click="swiperClick"></u-swiper></view>

				<!-- 列表内容区域 -->
				<view class="question-list-box" :style="{ 'min-height': contentHeight + 'px', 'margin-top': '0' }">
					<!--XXX 群众端 -->
					<block v-if="userType == 'qunzhong'">
						<view class="list-header-box">
							<image class="logo-image" src="../../static/sub-logo.png"></image>
							<view class="text-box">
								<view class="text1">扫码见代表 建议即时办</view>
								<view class="text2">点击提交问题</view>
							</view>
							<view class="submit-btn" @tap="submitQuestion">去提交</view>
						</view>
						<view style="margin: 0 -16rpx">
							<wxn-grid col="1">
								<wxn-grid-item v-for="(item, index) in menuList3" :key="index"><image :src="item.src" mode="widthFix" @tap="menuTap(item)"></image></wxn-grid-item>
							</wxn-grid>
						</view>

						<view class="list-content-box">
							<view class="title-text">{{ subTitle }}</view>
							<view v-if="myQuestionList.length == 0"><th-space @btnTap="submitQuestion" :desc="userType == 'qunzhong' ? '还没有问题，快去提一条' : '还没有任何通知'" :showBtn="userType == 'qunzhong' ? true : false"></th-space></view>
							<block v-else v-for="(item, index) in myQuestionList" :key="index">
								<view class="line-item" @tap="toProDetail(item)">
									<view class="title-date">
										<view class="title">{{ item.title }}</view>
										<view class="date">{{ item.createTime }}{{ '&emsp;' }}{{ userType == 'qunzhong' ? item.toUserName : item.userName }}</view>
									</view>
									<view v-if="userType == 'qunzhong'" class="status-text">{{ item.nodeStatusName }}</view>
								</view>
							</block>
						</view>
					</block>
					<!--XXX 非群众端  -->
					<block v-else>
						<wxn-grid col="2">
							<wxn-grid-item v-for="(item, index) in menuList" :key="index"><image class="menu-item" :src="item.src" @tap="menuTap(item)"></image></wxn-grid-item>
						</wxn-grid>
						<view class="menu-box" v-for="(item, index) in menuList2" :key="index">
							<image class="image" mode="widthFix" :src="item.src" @tap="menuTap(item)"></image>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- </block> -->
		<!-- HACK 2023-04-12修改，合并群众端与非群众端首页 start-->
		<!-- <block v-else>
			<view class="info-box" style="background: linear-gradient(93deg, #DF3B37 0%, #C62727 100%);">
				<view class="sub-box">
					<image class="sub-img" :src="$imagePreview(userInfo.imagePath)" mode="aspectFill"></image>
					<view class="sub-info">
						<view class="clamp">{{ userInfo.sysUser ? userInfo.sysUser.userName : '游客' }}</view>
						<view class="sub-node">
							<text class="txt">{{ userInfo.roleNames ? userInfo.roleNames[0] : '群众' }}</text>
						</view>
					</view>
				</view>
			</view> -->

		<!-- <view class="container">
			<u-cell-group class="link-list"> -->
		<!-- <u-cell-item title="基本信息" @click="navTo('/pages/load/info')"><image slot="icon" class="list-icon" src="/static/img/icon_17.png" mode="widthFix"></image></u-cell-item> -->
		<!-- 	<u-cell-item title="小程序码" name="app" @click="navTo('/pages/user/app')">
					<image slot="icon" class="list-icon" src="/static/img/icon_19.png" mode="widthFix"></image>
				</u-cell-item>
				<u-cell-item title="退出登录" @click="loginOut" :borderBottom="false">
					<image slot="icon" class="list-icon" src="/static/img/icon_23.png" mode="widthFix"></image>
				</u-cell-item>
			</u-cell-group>
		</view>
		</block> -->
		<!-- <u-tabbar class="tabbar" v-model="current" :list="tabList" @change="tabChange"></u-tabbar> -->
		<!-- HACK 2023-04-12修改，合并群众端与非群众端首页 end-->
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			//
			title: '寿光市智慧人大信息化平台',
			contentHeight: 0,
			titleBarHeight: 0,
			spaceContent: 0,
			swiperList: [],
			myQuestionList: [],
			userType: undefined, //当前角色身份 ‘群众’-‘政协用户’
			distance: 0, //页面滚动阈值
			scroDistance: 0, //页面实际滚动距离
			total: 0, //列表数据总量
			pageNo: 1, //分页
			searchContent: '', //搜索框内容
			rgba: 'linear-gradient(93deg, rgba(223, 59, 55,0) 0%, rgba(198,39,39,0) 100%)', //'rgba(223, 59, 55,0)'
			text: '',
			tabList: [
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					title: '寿光市智慧人大信息化平台',
					customIcon: false
				},
				{
					iconPath: 'account',
					selectedIconPath: 'account-fill',
					text: '我的',
					title: '我的',
					customIcon: false
				}
			],
			current: 0,
			scrollTop: 0,
			tabsCurrent: 0,
			tabsList: [
				{
					name: '邀您协商',
					count: '0'
				},
				{
					name: '结果公示',
					count: '0'
				}
			],
			Notice: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				readType: '',
				announcements: {
					dataType: '1',
					title: ''
				},
				loaded: false,
				loading: 'loadmore'
			},
			list: [],
			param: {
				title: '',
				nodeStatus: '1'
			},
			loading: 'loadmore',
			menuList: [
				{
					type: '问题列表',
					src: '../../static/menu2.png' //问题列表
				}
			],
			menuList2: [],
			menuList3: [
				{
					type: '调查问卷',
					src: '../../static/menu4.png' //调查问卷
				}
			], //非群众段-功能菜单、
			subTitle: '我的问题', //列表标题
			clientCode: '',
			roleCodes: '',
			userId: '',
			userName: ''
		};
	},
	onLoad() {
		if (this.userInfo.Authorization == undefined) {
			uni.redirectTo({
				url: '/pages/login/index'
			});
		} else {
			//身份类型-群众
			if (this.userInfo.userId != undefined) {
				this.userType = this.userInfo.roleCodes[0];
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.subTitle = '我的问题';
			} else {
				if (this.$sysMenus('perform')) {
					this.menuList.unshift({
						type: '履职管理',
						src: '../../static/menu1.png' //履职管理
					});
				}
				if (this.$sysMenus('dcwj')) {
					this.menuList2.push({
						type: '调查问卷',
						src: '../../static/menu3.png' //调查问卷
					});
				}

				this.userType = 'contray-qunzhong';
				this.subTitle = '通知公告';
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.roleCodes = this.userInfo.roleCodes.join(',');
				this.userId = this.userInfo.sysUser.id;
				this.userName = this.userInfo.sysUser.userName;
			}

			this.getBanner();
		}
		// this.loadLogin();
		// this.loadData();
	},
	onShow() {
		if (this.userType == 'qunzhong') {
			this.myList();
		} else if (this.userType == 'contray-qunzhong') {
			this.notice();
		}
	},
	onReady() {
		this.titleBarHeight = this.$refs.titleBar.getHeight();
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onShareAppMessage(res) {
		return {
			title: this.title,
			path: '/pages/load/index'
		};
	},
	onShareTimeline(res) {
		return {};
	},
	onReachBottom() {
		console.log('onReachBottom');
		if (this.myQuestionList.length >= this.total) return;
		if (this.userType == 'qunzhong') {
			this.myList();
		}
	},
	onPageScroll(param) {
		this.scroDistance = param.scrollTop;
		let rota = this.scroDistance / this.distance;
		// if (rota < 0.7)
		// 	rota = 0
		let color1 = 'rgba(223, 59, 55,' + rota.toFixed(1) + ')';
		let color2 = 'rgba(198,39,39,' + rota.toFixed(1) + ')';
		this.rgba = 'linear-gradient(93deg,' + color1 + ' 0%,' + color2 + '  100%)'; //'rgba(223, 59, 55,' + rota.toFixed(1) + ')'
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		/* 履职管理 */
		perform() {
			if (this.$sysMenus('perform_eval_group')) {
				uni.navigateTo({
					url: '/pagesA/duties/index'
				});
			} else {
				uni.navigateTo({
					url: '/pagesA/duties/self'
				});
				return false;
				//判断是否活动组
				if (this.$roleCodes('xiaozuguanliyuan')) {
					let wyhdz = this.userInfo.userInfo.wyhdz;
					if (wyhdz == null || wyhdz == '') {
						wyhdz = this.userInfo.userInfo.remark4;
					}
					uni.navigateTo({
						url: '/pagesA/duties/group?wyhdz=' + wyhdz
					});
				} else {
					uni.navigateTo({
						url: '/pagesA/duties/self'
					});
				}
			}
		},
		//搜索回调
		search(data) {
			this.searchContent = data.data;
			this.pageNo = 1;
			if (this.userType == 'qunzhong') {
				this.myList();
			}
		},
		// 非群众端-菜单
		menuTap(item) {
			switch (item.type) {
				case '履职管理':
					this.perform();
					break;
				case '调查问卷':
					uni.navigateTo({
						url: '/pagesB/question/list'
					});
					break;
				case '企业代表建议直通车':
					uni.navigateTo({
						url: '/pagesB/question/list?type=2'
					});
					break;
				case '问题列表':
					uni.navigateTo({
						url: '../../subPackages/pages/submit/problemList',
						fail(err) {
							console.log(JSON.stringify(err));
						}
					});
					break;
			}
		},
		//群众端-我的问题
		myList() {
			let data = {
				clientCode: this.$c.clientCode,
				shenfen: 1,
				pageNo: this.pageNo,
				problem: {
					title: this.searchContent
				}
			};
			this.$request(this.$c.api.myList, data).then((result) => {
				this.total = result.data.total;
				if (this.pageNo == 1) this.myQuestionList.length = 0;
				this.myQuestionList = this.myQuestionList.concat(result.data.records);
				if (this.myQuestionList.length < this.total) this.pageNo++;
			});
		},
		// 通知公告
		notice() {
			let data = {
				pageNum: this.pageNo,
				pageSize: 10,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				readType: '',
				announcements: {
					dataType: '1',
					title: this.searchContent
				}
			};
			this.$request('/announcements/myList', data).then((result) => {
				this.total = result.data.total;
				if (this.pageNo == 1) this.myQuestionList.length = 0;
				this.myQuestionList = this.myQuestionList.concat(result.data.records);
				if (this.myQuestionList.length < this.total) this.pageNo++;
				// let count = 0;
				// if (type != 'add') {
				// 	uni.stopPullDownRefresh();
				// 	this.Notice.list = [];
				// }

				// this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ?
				// 	'loadmore' : 'nomore';
				// this.Notice.pageNum = this.Notice.pageNum + 1;
				// this.Notice.list = this.Notice.list.concat(res.data.records);
				// this.Notice.loaded = true;
				// if (this.Notice.list.length <= 0) {
				// 	this.Notice.loading = 'nodata';
				// }
			});
		},
		toProDetail(item) {
			uni.navigateTo({
				url: '/subPackages/pages/submit/detail?id=' + item.id
			});
		},
		//提问题
		submitQuestion() {
			uni.navigateTo({
				url: '/subPackages/pages/submit/street'
			});
		},
		loadLogin() {
			if (this.userInfo.userInfoId) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
			this.clientCode = '370502';
			this.pageNum = 1;
			this.pageSize = 10;
		},
		loadData(type = 'add') {
			this.getBanner();
			this.getBaiduToken();
			// this.loadDict('tip', 'tip');

			this.loadNotice(type);
			// this.loadRemoval(type);
		},
		loadNotice(type = 'add') {
			if (type == 'add') {
				if (this.Notice.loading == 'nomore') {
					return false;
				}
				this.Notice.loading = 'loading';
			} else {
				this.Notice.loading = 'loading';
			}
			if (type != 'add') {
				this.Notice.pageNum = 1;
			}
			let data = {
				pageNum: this.Notice.pageNum,
				pageSize: this.Notice.pageSize,
				currentUserId: this.userId,
				roleCodes: this.roleCodes,
				clientCode: this.clientCode,
				readType: this.Notice.readType,
				announcements: this.Notice.announcements
			};
			this.$request('/announcements/myList', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Notice.list = [];
				}

				this.Notice.loading = this.Notice.pageNum < Math.ceil(res.data.total / this.Notice.pageSize) ? 'loadmore' : 'nomore';
				this.Notice.pageNum = this.Notice.pageNum + 1;
				this.Notice.list = this.Notice.list.concat(res.data.records);
				this.Notice.loaded = true;
				if (this.Notice.list.length <= 0) {
					this.Notice.loading = 'nodata';
				}
			});
		},
		getBaiduToken() {
			this.$request('/baidu/ttsToken', {
				clientCode: this.clientCode,
				userId: this.userId
			}).then((res) => {
				uni.setStorageSync('baiduToken', res.data);
			});
		},
		getBanner() {
			let list = uni.getStorageSync('swiperList');
			if (list > 0) {
				this.swiperList = list;
				return false;
			}
			this.$request('/banner/list', {
				clientCode: this.clientCode,
				userId: this.userId,
				banner: {
					enable: '1'
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				if (res.data.records.length > 0) {
					this.swiperList = [];
					res.data.records.forEach((item) => {
						if (item.fileList && item.fileList.length > 0) {
							this.swiperList.push({
								id: item.id,
								title: item.title,
								url: item.externalLink,
								image: this.$imagePreview(item.fileList[0].path)
							});
						}
					});
					uni.setStorageSync('swiperList', this.swiperList);
				}
			});
		},
		swiperClick(index) {
			// this.current = index;
			if (this.swiperList[index].id) {
				uni.navigateTo({
					url: '/pagesA/banner/detail?id=' + this.swiperList[index].id
				});
			}
		},
		tabChange(index) {
			// let url = this.tabList[index].pagePath;
			// this.goTo(url);
			this.current = index;
			this.title = this.tabList[index].title;
			uni.setNavigationBarTitle({
				title: this.title
			});
		},
		tabsChange(index) {
			this.tabsCurrent = index;
		},
		loginOut() {
			this.$store.commit('logout');
			uni.reLaunch({
				url: '/pages/login/index'
			});
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		navTo(url) {
			if (this.userInfo.Authorization) {
				uni.navigateTo({
					url: url
				});
			} else {
				this.$store.commit('logout');
				uni.showModal({
					title: '提示',
					content: '请先登录！',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
};
</script>

<style scoped lang="scss">
.load-view {
	min-height: 100vh;
	overflow: hidden;
	background: #fff no-repeat top center;
}

.banner {
	// height: 465rpx;
	min-height: 280rpx;
	padding: 34rpx 30rpx;

	.image {
		width: 100%;
	}
}

.list-box {
	padding: 0 30rpx;
	background-color: #fff;
}

.index-card {
	position: relative;
	margin: -60rpx 30rpx 20rpx;
	padding: 20rpx 0;
	border-radius: 12rpx;
	background-color: #fff;

	.card-ttl {
		margin-bottom: 16rpx;
		padding-left: 20rpx;
		font-size: 16px;
		font-weight: bold;
		color: #444;
		border-left: 10rpx solid #f00;
	}

	.card-box {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0 10rpx;
		border-top: 1rpx solid #ebebeb;

		.card-item {
			width: 190rpx;
		}
	}

	.card-link {
		overflow: hidden;

		.image {
			margin: 0 auto 22rpx;
			width: 52rpx;
			height: 52rpx;
			object-fit: contain;
		}

		.link-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			min-height: 160rpx;
			font-size: 14px;
			line-height: 1.1;
			text-align: center;
		}
	}
}

.index-box {
	display: flex;
	justify-content: space-between;
	margin-top: 20upx;
	padding: 20upx 30upx;
	background-color: #fff;

	.link-inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 400upx;

		&.w1 {
			width: 268rpx;
		}
	}

	.link-item {
		display: block;
		width: 100%;

		.image {
			width: 100%;
		}
	}
}

.pro-row {
	.pro-title {
		margin-bottom: 20rpx;
		font-size: 15px;
		color: #e5231a;
	}
}

.h2-row {
	margin: 0;
	padding: 20rpx 30rpx;
	border: 0;
	background-color: #fff;
}

.content-view-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(93deg, #df3b37 0%, #c62727 100%);

	.search-box {
		padding: 15rpx 26rpx 15rpx;
		position: sticky;
		z-index: 99999;
	}

	.banner-view {
		padding: 0rpx 26rpx 20rpx;
		box-sizing: border-box;
		z-index: 1;

		.banner-box {
			margin-top: 22rpx;
			height: 320rpx;
		}
	}
}

.question-list-box {
	width: 100%;
	border-radius: 36rpx 36rpx 0rpx 0rpx;
	margin-top: -20rpx;
	background: #ffffff;
	z-index: 2;
	padding: 36rpx 30rpx 0;
	box-sizing: border-box;

	.list-header-box {
		margin-bottom: 20rpx;
		width: 100%;
		min-height: 156rpx;
		background: linear-gradient(90deg, #ffefbb 0%, #ffd5bf 100%);
		box-shadow: 0rpx 8rpx 20rpx 0rpx #ffd6b3;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		padding-right: 24rpx;
		box-sizing: border-box;

		.logo-image {
			width: 136rpx;
			height: 116rpx;
		}

		.text-box {
			flex: 1;
			margin-left: 8rpx;

			.text1 {
				font-size: 34rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: bold;
				color: #7a1c15;
				line-height: 48rpx;
				text-shadow: 0px 8px 20px #ffd6b3;
			}

			.text2 {
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #bc816c;
				line-height: 40rpx;
				text-shadow: 0px 8px 20px #ffd6b3;
			}
		}

		.submit-btn {
			width: 132rpx;
			height: 58rpx;
			background: linear-gradient(90deg, #ff5c01 0%, #fe0000 100%);
			box-shadow: 0rpx 8rpx 20rpx 0rpx #ffd6b3;
			border-radius: 29rpx;
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #ffe3b7;
			line-height: 40rpx;
			text-shadow: 0px 8px 20px #ffd6b3;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.list-content-box {
		box-sizing: border-box;

		.title-text {
			height: 80rpx;
			// background: #FFFFFF;
			display: flex;
			align-items: center;
			font-size: 34rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 48rpx;
			border-bottom: 2rpx solid #f6f7fb;
		}
	}
}

.op-bg-view {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	// background: linear-gradient(93deg, #DF3B37 0%, #C62727 100%);
}

.tabbar {
}

.menu-item {
	width: 100%;
	height: 164rpx;
	// background-image: url('../../static/menu2.png');
	// background-size: 100% 100%;
}

.menu-box {
	padding: 6rpx 12rpx;

	.image {
		width: 100%;
		height: 160rpx;
	}
}
</style>
